/**
 * 飞机管理
 */
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="fjzch">
							<template #label><vp-label zh="飞机号" en="A/C REG" /></template>
							<el-input v-model="searchForm.fjzch" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fjxlh">
							<template #label><vp-label zh="序列号" en="MSN" /></template>
							<el-input v-model="searchForm.fjxlh" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fjjxList">
							<template #label><vp-label zh="机型" en="A/C Type"/></template>
							<VpAircraftTypeMultSelect
								:selected="searchForm.fjjxList"
								@aircraftModelMultSelected="(data: any) => {searchForm.fjjxList = data}"
								class="w100"
							/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jdmc">
							<template #label><vp-label zh="基地" en="Base" /></template>
							<el-input v-model="searchForm.jdmc" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="zt">
							<template #label><vp-label zh="状态" en="Status" /></template>
							<el-select v-model="searchForm.zt" clearable>
								<el-option label="启用" :value="10"></el-option>
								<el-option label="禁用" :value="20"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="scrq">
							<template #label><vp-label zh="生产日期" en="MFD"/></template>
							<el-date-picker
								v-model="searchForm.scrq"
								type="daterange"
								start-placeholder="开始日期/Start Date"
								end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'basedataAircraft.edit'" @click="handleAdd"/>
		</template>
		<template #table>
			<vp-vxe-table
				id="basedataAircraftTable"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange" 
				row-key="id"
				v-loading="loading"
			>	
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column 
					sortable
					field="fjzch" 
					title="飞机号 A/C REG"
					show-overflow
					min-width="100"
				>
					<template #header><vp-label zh="飞机号" en="A/C REG" /></template>
					<template #default="{ row }">
						<span v-html="markTextColor(searchForm.fjzch, row.fjzch)"/>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="fjxlh" 
					title="序列号 MSN"
					show-overflow 
					min-width="100"
				>
					<template #header><vp-label zh="序列号" en="MSN" /></template>
					<template #default="{ row }">
						<span v-html="markTextColor(searchForm.fjxlh, row.fjxlh)"/>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="jx" 
					title="机型 A/C Type"
					show-overflow 
					min-width="100"
				>
					<template #header><vp-label zh="机型" en="A/C Type"/></template>
				</vxe-column>
				<vxe-column 
					field="yxgf" 
					title="运行规范 Specification"
					show-overflow 
					width="110"
				>
					<template #header><vp-label zh="运行规范" en="Specification"/></template>
				</vxe-column>
				<vxe-column 
					field="zwsl" 
					title="座位数量 Seat Count"
					show-overflow 
					width="90"
				>
					<template #header><vp-label zh="座位数量" en="Seat Count"/></template>
				</vxe-column>
				<vxe-column 
					field="zdqfzl" 
					title="最大起飞重量 Max Takeoff Weight"
					show-overflow 
					width="140"
				>
					<template #header><vp-label zh="最大起飞重量" en="Max Takeoff Weight"/></template>
					<template #default="{ row }">
						<span>{{ row.zdqfzl >= 0 ? row.zdqfzl + row.zldw : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					field="yxrn" 
					title="油箱容量 FTC"
					show-overflow 
					width="100"
				>
					<template #header><vp-label zh="油箱容量" en="FTC"/></template>
					<template #default="{ row }">
						<span>{{ row.yxrn >= 0 ? row.yxrn + row.yxrndw : '' }}</span>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="zt" 
					title="状态 Status" 
					show-overflow
					width="90"
					align="center"
				>
					<template #header><vp-label zh="状态" en="Status" /></template>
					<template #default="{ row }">
						<el-tag v-if="row.zt === 10" type="success">启用</el-tag>
						<el-tag v-else type="danger">禁用</el-tag>
					</template>
				</vxe-column>
				<vxe-column 
					field="whrxm" 
					title="维护人 Editor"
					show-overflow 
					width="80"
				>
					<template #header><vp-label zh="维护人" en="Editor"/></template>
				</vxe-column>
				<vxe-column 
					sortable
					field="whsj" 
					title="维护时间 Edit Time"
					show-overflow 
					width="160"
				>
					<template #header><vp-label zh="维护时间" en="Edit Time"/></template>
				</vxe-column>
				<vxe-column 
					field="operation" 
					title="操作 Operation"
					fixed="right" 
					width="180"
				>
					<template #header><vp-label-operations/></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit text v-auth="'basedataAircraft.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-enable text type="primary" v-if="scope.row.zt === 20" v-auth="'basedataAircraft.edit'" @click="handleEnable(scope.row)"/>
							<vp-btn-disable text type="danger" v-if="scope.row.zt === 10" v-auth="'basedataAircraft.edit'" @click="handleDisable(scope.row)"/>
							<vp-btn-view text @click="handleView(scope.row.id)"/>
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<EditAircraft ref="editAircraftRef" @formSubmited="handleFormSubmited"></EditAircraft>
	</vp-main-page>
</template>
<script setup lang="ts" name="basedataAircraft">
import { onMounted, reactive, ref, defineAsyncComponent, watch } from 'vue'
import request from '/@/utils/request';
import { useRouter } from 'vue-router';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import VpAircraftTypeMultSelect from "/@/components/vp/aircraftType/VpAircraftTypeMultSelect.vue";
import { markTextColor } from '/@/utils/toolsValidate';

const EditAircraft = defineAsyncComponent(() => import('./component/EditAircraft.vue'));

const searchForm = reactive({
	fjzch: "",
	fjxlh: "",
	fjjxList: [],
	jdmc: "",
	zt: 10,
	scrq: [],
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

// 加载列表数据
const loadDataList = () => {
	loading.value = true;
	request.get('/basicData/aircraft/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || [];
		page.total = res?.data?.total || 0;
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	loadDataList();
})

const editAircraftRef = ref();
const tableRef = ref();

const handleAdd = ()=>{
	editAircraftRef.value.handleOpen({
		type: 'add',
	});
}

const handleEdit = (row: any)=>{
	editAircraftRef.value.handleOpen({
		type: 'edit',
		id: row.id
	});
}

const handleFormSubmited = ()=>{
	loadDataList();
}

const handleView = (id: string)=>{
	router.push({
		name: "viewBasedataAircraft",
		params: {
			id: id,
		},
	})
}

// 启用
const handleEnable = (row: any)=>{
	VpMessageBox.confirmOperation().then(()=>{
		loading.value = true;
		request.post(`/basicData/aircraft/enable/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

// 禁用
const handleDisable = (row: any)=>{
	VpMessageBox.confirmOperation().then(()=>{
		loading.value = true;
		request.post(`/basicData/aircraft/disable/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

</script>

<style scoped lang="scss">
</style>